<template>
  <el-upload
      v-model:file-list="fileList"
      :http-request="uploadFiles"
      :show-file-list="props.showFileList"
      list-type="picture-card"
      :limit="props.limit"
      :accept="props.imageType"
      :on-preview="handlePictureCardPreview"
      :on-change="handleChange"
      :on-remove="handleRemove"
  >
    <img v-if="props.imageUrl" :src="props.imageUrl" class="avatarImage"/>
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import {ElMessage, UploadUserFile} from 'element-plus';
import {removeImgFile, uploadImg} from '@/api/fileApi.js';

const props = defineProps({
  limit: {
    type: Number,
    default: 1,
  },
  imageType: {
    type: String,
    default: 'image/png,image/jpeg,image/gif,image/webp',
  },
  imageUrl: {
    type: String,
    default: '',
  },
  isNewRecord: { // 新增模式的标识
    type: Boolean,
    default: false,
  },
  showFileList: {
    type: Boolean,
    default: false,
  }
});
const emit = defineEmits(['handleImageSuccess']);
// 状态变量
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const uploadFiles = async (options) => {
  const { file } = options;
  const formData = new FormData();
  formData.append('file', file);
  try {
    const res = await uploadImg(formData);
    if (res.code === 0) {
      props.imageUrl = res.data;
      // 向文件列表中添加文件名称
      fileList.value[fileList.value.length - 1].fileName = res.data.split('/').pop();
      emit('handleImageSuccess', res.data); // 只发射图片 URL
    } else {
      ElMessage.error('上传失败');
    }
  } catch (error) {
    ElMessage.error('上传失败');
  }
}
// 初始化时重置文件列表
watch(
    () => props.isNewRecord,
    (newValue) => {
      if (newValue) {
        resetFileList(); // 清空文件列表
      }
    }
);

// 重置文件列表
function resetFileList() {
  fileList.value = [];
}

// 删除文件
const handleRemove= (uploadFile, uploadFiles) => {
  removeImgFile(uploadFile.fileName).then((res) => {
    if (res.data.code === 0) {
      ElMessage.success('删除成功');
    } else {
      ElMessage.error('删除失败');
    }
  });
};

// 预览图片
const handlePictureCardPreview= (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

// 监听文件变化
const handleChange = async (file) => {

};
</script>

<style setup>
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.search-title{
  background: white;
  padding: 10px;
  margin-top: 10px;
}



.demo-pagination-block {
  margin-top: 10px;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 130px;
  height: 130px;
  text-align: center;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatarImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
